<template>
  <w-view>
    <layout-property :w="w" />
  </w-view>
</template>

<script>
  import $ from 'dfish-widget'
  import Widget from '../Widget.vue'
  import Pub from '../widget.pub.js'
  import Align from '../widget.align.js'

  export default {
    mixins: [Widget],
    data() {
      return {
        name: 'Tabs',
        remark: '可切换标签容器',
        extends: [Pub, Align],
        attrs: [{
          name: 'position',
          remark: '标签位置',
          type: 'String',
          option: '<var>top</var><var>left</var><var>right</var><var>bottom</var>',
          default: 'top',
        }, {
          name: 'face',
          remark: '标签位置',
          type: 'String',
          option: '<var>line</var><var>cell</var>',
          default: 'line',
        }, {
          name: 'flex-size',
          remark: '用一个数组表达Tab按钮宽度的最小值和最大值。数组的第一个元素是最小值，第二个元素是最大值',
          type: 'Array',
          option: '<var>[minWidth, maxWidth]</var>',
          default: '',
        }, {
          name: 'quick-close-button',
          remark: '是否显示快捷关闭按钮',
          type: 'Boolean',
          option: '',
          default: '',
        }],
				events: [{
				  name: 'click:quickCloseButton',
				  remark: '点击快捷关闭按钮时触发',
				  option: '(event: Event)',
				}],
        slots: [{
          name: 'append',
          remark: '在Tab按钮右边位置的插槽',
          option: '',
          props: '',
        }],
        examples: [{
          remark: '简单范例',
          type: 'html',
          view: true,
          code: `
            <template>
              <w-tabs height="150" :current="tabCurrent" face="line" gap="30">
                <w-tab v-for="item in tabs" :text="item.text" :key="item.id" @click="tabFocus(item)">
                  <p>{{item.content}}</p>
                </w-tab>
              </w-tabs>
            </template>
            <${'script'}>
              export default {
                data() {
                  return {
                    tabCurrent: '001',
                    tabs: [
                      {id: '001', text: 'TAB1', content: 'lightsalmon'},
                      {id: '002', text: 'TAB2', content: 'lightpink'},
                      {id: '003', text: 'TAB3', content: 'lightcoral'},
                    ]
                  }
                },
                methods: {
                  tabFocus(item) {
                    this.tabCurrent = item.id
                  }
                }
              }
            </${'script'}>
          `,
					comp: {
						data() {
						  return {
						    tabCurrent: '001',
						    tabs: [
						      {id: '001', text: 'TAB1', content: 'lightsalmon'},
						      {id: '002', text: 'TAB2', content: 'lightpink'},
						      {id: '003', text: 'TAB3', content: 'lightcoral'},
						    ]
						  }
						},
						methods: {
						  tabFocus(item) {
						    this.tabCurrent = item.id
						  },
						}
					}
        },{
          remark: '简单范例',
          type: 'html',
          view: true,
          code: `
            <template>
              <w-tabs height="150" :current="tabCurrent" face="cell" style="border: 1px solid #ddd">
                <w-tab v-for="item in tabs" :text="item.text" :key="item.id" @click="tabFocus(item)">
                  <p>{{item.content}}</p>
                </w-tab>
              </w-tabs>
            </template>
            <${'script'}>
              export default {
                data() {
                  return {
                    tabCurrent: '001',
                    tabs: [
                      {id: '001', text: 'TAB1', content: 'lightsalmon'},
                      {id: '002', text: 'TAB2', content: 'lightpink'},
                      {id: '003', text: 'TAB3', content: 'lightcoral'},
                    ]
                  }
                },
                methods: {
                  tabFocus(item) {
                    this.tabCurrent = item.id
                  }
                }
              }
            </${'script'}>
          `,
					comp: {
						data() {
						  return {
						    tabCurrent: '001',
						    tabs: [
						      {id: '001', text: 'TAB1', content: 'lightsalmon'},
						      {id: '002', text: 'TAB2', content: 'lightpink'},
						      {id: '003', text: 'TAB3', content: 'lightcoral'},
						    ]
						  }
						},
						methods: {
						  tabFocus(item) {
						    this.tabCurrent = item.id
						  }
						}
					}
        }, {
          remark: 'Tab的增加和删除',
          type: 'html',
          view: true,
          code: `
            <template>
              <w-buttonbar height="60">
                <w-button text="增加Tab" @click="addTab"></w-button>
              </w-buttonbar>
              <w-tabs height="150" :current="tabCurrent" face="cell" :flex-size="[60, 120]" style="border: 1px solid #ddd">
                <w-tab v-for="item in tabs" :text="item.text" :key="item.id" @click="tabFocus(item)" :closable="true" @click:close="tabClose(item)">
                  <p>{{item.content}}</p>
                </w-tab>
              </w-tabs>
            </template>
            <${'script'}>
              export default {
                data() {
                  return {
                    tabCurrent: 0,
                    tabIndex: 3,
                    tabs: [
                      {id: 0, text: 'TAB0', content: 'lightsalmon'},
                      {id: 1, text: 'TAB1', content: 'lightpink'},
                      {id: 2, text: 'TAB2', content: 'lightcoral'},
                    ]
                  }
                },
                methods: {
                  addTab() {
                    let i = this.tabIndex++
                    this.tabs.push({id: i, text: \`TAB\${i}\`, content: \`content \${i}\`})
                    this.tabCurrent = i
                  },
                  tabFocus(item) {
                    this.tabCurrent = item.id
                  },
                  tabClose(item) {
                    let i = this.tabs.findIndex(v => v.id == item.id)
                    this.tabs.splice(i, 1)
                    if (item.id == this.tabCurrent) {
                      let focusItem = this.tabs[i] || this.tabs[i - 1]
                      if (focusItem) {
                        this.tabCurrent = focusItem.id
                      }
                    }
                  }
                }
              }
            </${'script'}>
          `,
					comp: {
						data() {
              return {
                tabCurrent: 0,
                tabIndex: 3,
                tabs: [
                  {id: 0, text: 'TAB0', content: 'lightsalmon'},
                  {id: 1, text: 'TAB1', content: 'lightpink'},
                  {id: 2, text: 'TAB2', content: 'lightcoral'},
                ]
              }
						},
						methods: {
              addTab() {
                let i = this.tabIndex++
                this.tabs.push({id: i, text: `TAB${i}`, content: `content ${i}`})
                this.tabCurrent = i
              },
              tabFocus(item) {
                this.tabCurrent = item.id
              },
              tabClose(item) {
                let i = this.tabs.findIndex(v => v.id == item.id)
                this.tabs.splice(i, 1)
                if (item.id == this.tabCurrent) {
                  let focusItem = this.tabs[i] || this.tabs[i - 1]
                  if (focusItem) {
                    this.tabCurrent = focusItem.id
                  }
                }
              }
						}
					}
        }]
      }
    },
  }
</script>

<style>

</style>
